<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>页面示例</title>
    <link rel="stylesheet" href="./css/huacommon.css" />
    <link rel="stylesheet" href="./css/huatuku.css" />
    <style></style>
  </head>
  <body>
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div>图库</div>
      <div class="icons">
        <span>🌟</span>
        <span>🔥</span>
        <span>🔍</span>
      </div>
    </div>
    <!-- 标签栏 -->
    <div class="tab-bar">
      <div class="active">热门</div>
      <div>冬天</div>
      <div>ins风</div>
      <div>拼图</div>
      <div>热点爆款</div>
    </div>

    <!-- 内容区 -->
    <div class="content" style="margin-bottom: 50px" id="card-container">
      <!-- 本地 json 渲染 -->
      <!-- <!~~ 卡片 1 ~~>
      <div class="card" onclick="window.location.href='./detail.html'">
        <img src="./imgs/tuku1.png" alt="" />
        <div class="info">
          <p>氛围感live实况热歌bgm</p>
          <div class="use-button">使用 18.5万人</div>
        </div>
      </div>

      <!~~ 卡片 2 ~~>
      <div class="card">
        <img src="./imgs/tuku2.png" alt="" />
        <div class="info">
          <p>Live玩法 | 简约治愈系</p>
          <div class="use-button">使用 32.5万人</div>
        </div>
      </div>

      <!~~ 卡片 3 ~~>
      <div class="card">
        <img src="./imgs/tuku3.png" alt="" />
        <div class="info">
          <p>辣妹po图 | ios播放玩法</p>
          <div class="use-button">使用 10.2万人</div>
        </div>
      </div>

      <!~~ 卡片 4 ~~>
      <div class="card">
        <img src="./imgs/tuku4.png" alt="" />
        <div class="info">
          <p>清晨风景图片</p>
          <div class="use-button">使用 5万人</div>
        </div>
      </div>

      <!~~ 卡片 5 ~~>
      <div class="card">
        <img src="./imgs/tuku5.png" alt="" />
        <div class="info">
          <p>怀旧经典古早滤镜</p>
          <div class="use-button">使用 3.5 万人</div>
        </div>
      </div>

      <!~~ 卡片 6 ~~>
      <div class="card">
        <img src="./imgs/tuku6.png" alt="" />
        <div class="info">
          <p>特别的人 | 情侣胶片 | 一张图片</p>
          <div class="use-button">使用 5万人</div>
        </div>
      </div>-->
    </div>

    <!-- Footer  -->
    <footer class="bottom-nav">
      <div>
        <a href="./index.html">首页</a>
      </div>
      <div class="bootom-active">
        <a style="color: #e650b3" href="./tuku.html">图库</a>
      </div>
      <div><a href="#">AI修图</a></div>
      <div><a href="#">设计室</a></div>
      <div><a href="./me.html">我</a></div>
    </footer>
    <script src="./js/tuku.js"></script>
  </body>
</html>
